<template>
	<div>
		<a-card :bordered="false" :bodyStyle="tstyle">
			<div class="table-page-search-wrapper" v-if="hasPerm('xjbWeekly:page')">
				<a-form layout="inline">
					<a-row :gutter="48">
						<!-- <a-col :md="6" :sm="24">
							<a-form-item label="组织机构"> 
								<a-tree-select
									v-decorator="['queryParam.orgs', {rules: [{ required: true, message: '请选择组织机构！' }]}]"
									style="width: 100%" :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
									:treeData="orgTree" placeholder="请选择机构" tree-default-expand-all
									@change="e => initrOrgName(e)">
									<span slot="title" slot-scope="{ id }">{{ id }}</span>
								</a-tree-select>
							</a-form-item> 
						</a-col> -->
						<a-col :md="6" :sm="24">
							<a-form-item label="任务类型">
								<a-select style="width: 100%" v-model="queryParam.type" placeholder="请选择任务类型"
									allow-clear>
									<a-select-option v-for="(item,index) in xjb_typeData" :key="index"
										:value="item.code">{{ item.value }}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="任务内容">
								<a-input v-model="queryParam.title" allow-clear placeholder=" 请输入关键字" />
							</a-form-item>
						</a-col>


						<a-col :md="6" :sm="24">
							<a-form-item label="参与人员">
								<a-select v-model="queryParam.manager" mode="multiple" style="width: 100%"
									:default-value="userInfo.account" placeholder="选择参与人员" :showArrow="true" allow-clear
									:maxTagCount="10" default-active-first-option>
									<a-select-option v-for="(item,index) in xjb_managerData" :key="index"
										:value="item.code">
										{{ item.name }}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>


						<template v-if="advanced">
							<!-- <a-col :md="6" :sm="24">
								<a-form-item label="任务子类型">
									<a-input v-model="queryParam.type2" allow-clear placeholder="请输入任务子类型" />
								</a-form-item>
							</a-col> -->
							<!-- <a-col :md="6" :sm="24">
								<a-form-item label="任务明细">
									<a-input v-model="queryParam.content" allow-clear placeholder="请输入任务明细" />
								</a-form-item>
							</a-col> -->
							<a-col :md="6" :sm="24">
								<a-form-item label="开始日期">
									<a-date-picker style="width: 100%" placeholder="请选择开始日期" allow-clear
										v-model="queryParam.startdateDate" @change="onChangestartdate" />
								</a-form-item>
							</a-col>
							<a-col :md="6" :sm="24">
								<a-form-item label="结束日期">
									<a-date-picker style="width: 100%" placeholder="请选择结束日期" allow-clear
										v-model="queryParam.enddateDate" @change="onChangeenddate" />
								</a-form-item>
							</a-col>
							<a-col :md="6" :sm="24">
								<a-form-item label="目前阶段">
									<a-select style="width: 100%" v-model="queryParam.stage" placeholder="请选择目前阶段"
										allow-clear>
										<a-select-option v-for="(item,index) in stageData" :key="index"
											:value="item.code">{{ item.value }}
										</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :md="6" :sm="24">
								<a-form-item label="完成率">
									<a-select style="width: 100%" v-model="queryParam.process" placeholder="请选择完成率"
										allow-clear>
										<a-select-option v-for="(item,index) in processData" :key="index"
											:value="item.code">
											{{ item.value }}
										</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :md="6" :sm="24">
								<a-form-item label="上线日期">
									<a-date-picker style="width: 100%" placeholder="请选择上线日期" allow-clear
										v-model="queryParam.productDate" @change="onChangeproduct" />
								</a-form-item>
							</a-col>
							<!-- <a-col :md="6" :sm="24">
								<a-form-item label="关联任务">
									<a-input v-model="queryParam.ref" allow-clear placeholder="请输入关联任务" />
								</a-form-item>
							</a-col> -->
							<a-col :md="6" :sm="24">
								<a-form-item label="有效性">
									<a-select style="width: 100%" v-model="queryParam.vflag" placeholder="请选择有效性"
										allow-clear>
										<a-select-option v-for="(item,index) in vflagData" :key="index"
											:value="item.code">{{ item.value }}
										</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<!-- <a-col :md="6" :sm="24">
								<a-form-item label="备注">
									<a-input v-model="queryParam.note" allow-clear placeholder="请输入备注" />
								</a-form-item>
							</a-col> -->
							<!-- <a-col :md="6" :sm="24">
								<a-form-item label="其他信息">
									<a-input v-model="queryParam.others" allow-clear placeholder="请输入其他信息" />
								</a-form-item>
							</a-col> -->
							<a-col :md="6" :sm="24">
								<a-form-item label="是否关闭">
									<a-select style="width: 100%" v-model="queryParam.complate" placeholder="请选择是否关闭"
										allow-clear>
										<a-select-option v-for="(item,index) in complateData" :key="index"
											:value="item.code">
											{{ item.value }}
										</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
						</template>
						<a-col :md="6" :sm="24">
							<span class="table-page-search-submitButtons">
								<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
								<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
								<a @click="toggleAdvanced" style="margin-left: 8px">
									{{ advanced ? '收起' : '展开' }}
									<a-icon :type="advanced ? 'up' : 'down'" />
								</a>
							</span>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</a-card>
		<a-card :bordered="false">
			<s-table ref="table" :columns="columns" :data="loadData" :alert="options.alert"
				:rowKey="(record) => record.id" :pageSize="40" :rowSelection="options.rowSelection">
				<template class="table-operator" slot="operator" v-if="hasPerm('xjbWeekly:add')">
					<a-button type="primary" v-if="hasPerm('xjbWeekly:add')" icon="plus" @click="$refs.addForm.add()">
						新增条目
					</a-button>
					<!-- <a-button v-show="false" type="danger" :disabled="selectedRowKeys.length < 1"
						v-if="hasPerm('xjbWeekly:delete')" @click="batchDelete">
						<a-icon type="delete" />批量删除
					</a-button> -->
					<x-down v-if="hasPerm('xjbWeekly:export')" title="个人周报" ref="batchExport"
						@batchExport="batchExport({exportGroup:'person',exportType:'word'})" />
					<x-down v-if="hasPerm('xjbWeekly:export')" title="小组周报" ref="batchExport"
						@batchExport="batchExport({exportGroup:'team',exportType:'word'})" />
					<x-down v-if="hasPerm('xjbWeekly:export')" title="中心周报" ref="batchExport"
						@batchExport="batchExport({exportGroup:'group',exportType:'word'})" />
				</template>
				<span slot="orgsScopedSlots" slot-scope="text">
					{{ 'xjb_sys_org' | dictType(text) }}
				</span>
				<span slot="typeScopedSlots" slot-scope="text">
					{{ 'xjb_type_type' | dictType(text) }}
				</span>
				<span slot="managerScopedSlots" slot-scope="text">
					<a-tag v-for="text0Data in JSON.parse(text)" :key="textData.code" color="green">
						{{ 'xjb_sys_user' | dictType(textData) }}
					</a-tag>
				</span>
				<span slot="sysidsScopedSlots" slot-scope="text">
					<a-tag v-for="textData in JSON.parse(text)" :key="textData.code" color="blue">
						{{ 'xjb_sysdetail' | dictType(textData) }}
					</a-tag>
				</span>
				<span slot="startdateScopedSlots" slot-scope="text">
					{{ moment(text).format('YYYY-MM-DD') }}
				</span>
				<span slot="enddateScopedSlots" slot-scope="text">
					{{ moment(text).format('YYYY-MM-DD') }}
				</span>
				<span slot="stageScopedSlots" slot-scope="text">
					{{ 'xjb_stageData' | dictType(text) }}
				</span>
				<span slot="processScopedSlots" slot-scope="text">
					{{ 'xjb_achieving_rate' | dictType(text) }}
				</span>
				<span slot="vflagScopedSlots" slot-scope="text">
					{{ 'yes_or_no' | dictType(text) }}
				</span>
				<!-- <span slot="complateScopedSlots" slot-scope="text">
					{{ '${column.dictTypeCode}' | dictType(text) }}
				</span> -->
				<span slot="action" slot-scope="text, record">
					<a v-if="hasPerm('xjbWeekly:edit')" @click="$refs.editForm.edit(record)">编辑</a>
					<a-divider v-show="false" type="vertical"
						v-if="hasPerm('xjbWeekly:edit') & hasPerm('xjbWeekly:delete')" />
					<a-popconfirm v-show="false" v-if="hasPerm('xjbWeekly:delete')" placement="topRight" title="确认删除？"
						@confirm="() => singleDelete(record)">
						<a>删除</a>
					</a-popconfirm>
				</span>
			</s-table>
			<add-form ref="addForm" @ok="handleOk" />
			<edit-form ref="editForm" @ok="handleOk" />
		</a-card>
	</div>
</template>
<script>
	import {
		STable,
		XDown
	} from '@/components'
	import moment from 'moment'
	import {
		xjbSysdetailList
	} from '@/api/modular/main/xjbsysdetail/xjbSysdetailManage'
	import {
		xjbWeeklyPage,
		xjbWeeklyDelete,
		xjbWeeklyExport
	} from '@/api/modular/main/xjbweekly/xjbWeeklyManage'
	import {
		sysDictTypeDropDown
	} from '@/api/modular/system/dictManage'
	import {
		getOrgTree,
		getOrgList
	} from '@/api/modular/system/orgManage'
	import {
		mapGetters
	} from 'vuex'
	import addForm from './addForm.vue'
	import editForm from './editForm.vue'
	export default {
		components: {
			STable,
			addForm,
			editForm,
			XDown
		},
		data() {
			return {
				stageData: [],
				processData: [],
				complateData: [],
				xjb_sysidsData: [],
				xjb_managerData: [],
				xjb_typeData: [],
				vflagData: [],
				complateData: [],
				orgTree: [],
				form: this.$form.createForm(this),
				// 高级搜索 展开/关闭
				advanced: false,
				// 查询参数
				queryParam: {
					pageSize: 40
				},
				// 表头
				columns: [{
						title: '组织机构',
						align: 'center',
						dataIndex: 'orgs',
						scopedSlots: {
							customRender: 'orgsScopedSlots'
						}
					},
					{
						title: '任务类型',
						align: 'center',
						dataIndex: 'type',
						scopedSlots: {
							customRender: 'typeScopedSlots'
						}
					},
					{
						title: '任务编号',
						align: 'center',
						dataIndex: 'taskcode'
					},
					{
						title: '任务子类型',
						align: 'center',
						dataIndex: 'type2'
					},
					{
						title: '任务内容',
						align: 'center',
						dataIndex: 'title'
					},
					// {
					// 	title: '任务明细',
					// 	align: 'center',
					// 	dataIndex: 'content'
					// },
					{
						title: '参与人员',
						align: 'center',
						dataIndex: 'manager',
						scopedSlots: {
							customRender: 'managerScopedSlots'
						}
					},
					{
						title: '关联系统',
						align: 'center',
						dataIndex: 'sysids',
						scopedSlots: {
							customRender: 'sysidsScopedSlots'
						}
					},
					{
						title: '开始日期',
						align: 'center',
						dataIndex: 'startdate',
						scopedSlots: {
							customRender: 'startdateScopedSlots'
						}
					},
					{
						title: '结束日期',
						align: 'center',
						dataIndex: 'enddate',
						scopedSlots: {
							customRender: 'enddateScopedSlots'
						}
					},
					{
						title: '目前阶段',
						align: 'center',
						dataIndex: 'stage',
						scopedSlots: {
							customRender: 'stageScopedSlots'
						}
					},
					{
						title: '完成率',
						align: 'center',
						dataIndex: 'process',
						scopedSlots: {
							customRender: 'processScopedSlots'
						}
					},
					{
						title: '上线日期',
						align: 'center',
						dataIndex: 'product'
					},
					// {
					// 	title: '关联任务',
					// 	align: 'center',
					// 	dataIndex: 'ref'
					// },
					// {
					// 	title: '有效性',
					// 	align: 'center',
					// 	dataIndex: 'vflag',
					// 	scopedSlots: {
					// 		customRender: 'vflagScopedSlots'
					// 	}
					// },
					// {
					// 	title: '备注',
					// 	align: 'center',
					// 	dataIndex: 'note'
					// },
					// {
					// 	title: '其他信息',
					// 	align: 'center',
					// 	dataIndex: 'others'
					// },
					// {
					// 	title: '是否关闭',
					// 	align: 'center',
					// 	dataIndex: 'complate',
					// 	scopedSlots: {
					// 		customRender: 'complateScopedSlots'
					// 	}
					// }
				],
				tstyle: {
					'padding-bottom': '0px',
					'margin-bottom': '10px'
				},
				// 加载数据方法 必须为 Promise 对象
				loadData: parameter => {
					return xjbWeeklyPage(Object.assign(parameter, this.switchingDate())).then((res) => {
						return res.data
					})
				},
				selectedRowKeys: [],
				selectedRows: [],
				options: {
					alert: {
						show: true,
						clear: () => {
							this.selectedRowKeys = []
						}
					},
					rowSelection: {
						selectedRowKeys: this.selectedRowKeys,
						onChange: this.onSelectChange
					}
				}
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		created() {
			this.$nextTick(() => {
				this.getxjb_managerData()
			});
			this.$nextTick(() => {
				this.getxjbSysdetailList()
			});
			this.$nextTick(() => {
				this.getOrgDate()
			});
			this.$nextTick(() => {
				this.sysDictTypeDropDown()
			});
			if (this.hasPerm('xjbWeekly:edit') || this.hasPerm('xjbWeekly:delete')) {
				this.columns.push({
					title: '操作',
					width: '150px',
					dataIndex: 'action',
					scopedSlots: {
						customRender: 'action'
					}
				})
			}
		},
		methods: {
			moment,

			validator_queryParam_title(rule, value, callback) {
				//console.log("validator_queryParam_title", rule, value, callback)
				if ('' === value || null == value) {
					callback()
				} else {
					if (value.length < 2) {
						callback('关键数量不能小于2')
					} else {
						callback()
					}
				}
			},


			getxjb_managerData() {
				this.xjb_managerData = this.$options.filters['dictData']('xjb_sys_user')
			},
			getxjbSysdetailList() {
				xjbSysdetailList().then((res) => {
					this.xjb_sysidsData == res.data
				})
			},
			/**
			 * 选择树机构，初始化机构名称于表单中
			 */
			initrOrgName(value) {
				this.form.getFieldDecorator('queryParam.orgName', {
					initialValue: this.orgList.find(item => value === item.id).name
				})
			},
			initrTypeName(value) {
				this.form.getFieldDecorator('queryParam.typeName', {
					initialValue: this.xjb_typeData.find(item => value === item.code).name
				})
			},
			/**
			 * 获取字典数据
			 */
			sysDictTypeDropDown() {
				this.formLoading = true

				//目前阶段
				sysDictTypeDropDown({
					code: 'xjb_stageData'
				}).then((res) => {
					this.stageData = res.data
					//console.log(this.stageData)
				})
				//完成率
				sysDictTypeDropDown({
					code: 'xjb_achieving_rate'
				}).then((res) => {
					this.processData = res.data
					//console.log(this.processData)
				})

				//任务类型
				sysDictTypeDropDown({
					code: 'xjb_type_type'
				}).then((res) => {
					this.xjb_typeData = res.data
					//console.log(this.xjb_typeData)
				})

				//是否关闭
				sysDictTypeDropDown({
					code: 'yes_or_no'
				}).then((res) => {
					this.complateData = res.data
					//console.log(this.complateData)
				})

				//有效性
				sysDictTypeDropDown({
					code: 'yes_or_no'
				}).then((res) => {
					this.vflagData = res.data
					//console.log(this.vflagData)
				})

				// 组织机构
				sysDictTypeDropDown({
					code: 'menu_type'
				}).then((res) => {
					this.orgsData = res.data
				})

				// 权重
				sysDictTypeDropDown({
					code: 'menu_weight'
				}).then((res) => {
					this.weightData = res.data
				})

				// 内外链
				sysDictTypeDropDown({
					code: 'open_type'
				}).then((res) => {
					this.openTypeData = res.data
					this.formLoading = false
				})
			},

			getOrgDate() {
				getOrgTree().then((res) => {
					this.orgTree = res.data
					//  this.orgData = res.data
				})
				getOrgList().then((res) => {
					this.orgList = res.data
					// this.orgData = res.data
				})
			},
			/**
			 * 查询参数组装
			 */
			switchingDate() {
				const queryParamstartdate = this.queryParam.startdateDate
				if (queryParamstartdate != null) {
					this.queryParam.startdate = moment(queryParamstartdate).format('YYYY-MM-DD')
					if (queryParamstartdate.length < 1) {
						delete this.queryParam.startdate
					}
				}
				const queryParamenddate = this.queryParam.enddateDate
				if (queryParamenddate != null) {
					this.queryParam.enddate = moment(queryParamenddate).format('YYYY-MM-DD')
					if (queryParamenddate.length < 1) {
						delete this.queryParam.enddate
					}
				}
				const queryParamproduct = this.queryParam.productDate
				if (queryParamproduct != null) {
					this.queryParam.product = moment(queryParamproduct).format('YYYY-MM-DD')
					if (queryParamproduct.length < 1) {
						delete this.queryParam.product
					}
				}
				//console.log("switchingDate", "this.queryParam", this.queryParam);
				const obj = JSON.parse(JSON.stringify(this.queryParam))
				if (obj.manager != null) {
					obj.manager = obj.manager.join(",")
				}
				if (obj.sysids != null) {
					obj.sysids = obj.sysids.join(",")
				}
				//console.log("switchingDate", "this.queryParam", this.queryParam, obj);
				return obj
			},
			/**
			 * 单个删除
			 */
			singleDelete(record) {
				const param = [{
					'id': record.id
				}]
				this.xjbWeeklyDelete(param)
			},
			/**
			 * 批量删除
			 */
			batchDelete() {
				const paramIds = this.selectedRowKeys.map((d) => {
					return {
						'id': d
					}
				})
				this.xjbWeeklyDelete(paramIds)
			},
			xjbWeeklyDelete(record) {
				xjbWeeklyDelete(record).then((res) => {
					if (res.success) {
						this.$message.success('删除成功')
						this.$refs.table.clearRefreshSelected()
					} else {
						this.$message.error('删除失败') // + res.message
					}
				})
			},
			toggleAdvanced() {
				this.advanced = !this.advanced
			},
			onChangestartdate(date, dateString) {
				this.startdateDateString = dateString
			},
			onChangeenddate(date, dateString) {
				this.enddateDateString = dateString
			},
			onChangeproduct(date, dateString) {
				this.productDateString = dateString
			},
			/**
			 * 批量导出
			 */
			batchExport1() {
				const paramIds = this.selectedRowKeys.map((d) => {
					return {
						'id': d
					}
				})
				xjbWeeklyExport(paramIds).then((res) => {
					this.$refs.batchExport.downloadfile(res)
					this.formLoading=false;
				})
			},
			/**
			 * 批量导出
			 */
			batchExport(parames) {
				console.log("parames",parames);
				xjbWeeklyExport(parames).then((res) => {
					this.$refs.batchExport.downloadfile(res)
				})
			},
			
			handleOk() {
				this.$refs.table.refresh()
			},
			onSelectChange(selectedRowKeys, selectedRows) {
				this.selectedRowKeys = selectedRowKeys
				this.selectedRows = selectedRows
			}
		}
	}
</script>
<style lang="less">
	.table-operator {
		margin-bottom: 18px;
	}

	button {
		margin-right: 8px;
	}
	
.topmenu .page-header-index-wide {
    max-width: unset; 
}
</style>
